<template>
	<view class="container" :class="{ 'pb-none': showApproval }">
		<view class="pb20">
			<view>
				<view v-if="!paramData.journalDetailId">
					<view class="m30" v-if="!paramData.labelId">
						<scroll-view
							scroll-x="true"
							class="scroll-top backf input-radius"
							scroll-with-animation="true"
							:scroll-left="scrollLeft"
						>
							<view
								:class="
									paramData.templateDetailId ==
									item.templateDetailId
										? 'tab-active scroll-type'
										: 'tab-normal scroll-type'
								"
								@tap="currentTypeClick(item, index)"
								v-for="(
									item, index
								) in workJournalCountQuestionVOList"
								:key="index"
							>
								{{ item.title }}
								<view>({{ item.questionCount }})</view>
							</view>
						</scroll-view>
					</view>
					<view
						class="f20 m30 g6b flex-between flex-wrap active-color"
						:class="downSHow ? 'h-125' : ''"
						v-else
					>
						<template v-if="!downSHow">
							<view
								:class="
									paramData.labelId == item.labelId
										? 'active-label'
										: 'box-label'
								"
								v-for="(
									item, index
								) in workJournalCountLabelVOList.slice(0, 8)"
								:key="index"
								@tap="changeLabel(item)"
							>
								{{ item.labelName }}
								<text
									:class="
										paramData.labelId == item.labelId
											? 'gff pl10'
											: 'primary-color pl10'
									"
									>{{ item.labelCount }}</text
								>
							</view>
						</template>
						<view
							class="box-label primary-color flex-center"
							v-if="workJournalCountLabelVOList.length > 9"
							@tap="downSHow = !downSHow"
						>
							{{ downSHow ? '查看更多' : '收起' }}
							<uni-icons
								:type="downSHow ? 'bottom' : 'top'"
								size="12"
								color="#3a74fc"
							></uni-icons>
						</view>
						<template v-if="workJournalCountLabelVOList.length > 9">
							<view
								class="symbol"
								v-for="index of justNum"
								:key="index"
							></view>
						</template>
						<template v-if="workJournalCountLabelVOList.length < 9">
							<view
								class="symbol"
								v-for="index of justNumLow"
								:key="index"
							></view>
						</template>
					</view>
				</view>
				<view v-if="detailInfo.details.length > 0">
					<view
						class="m30 backf input-radius"
						v-for="(item, index) in detailInfo.details"
						:key="index"
					>
						<view class="p30 pb0">
							<view
								class=""
								v-if="
									item.content ||
									(item.urls && item.urls.length) ||
									(item.voice && item.voice.length) ||
									paramData.labelId
								"
							>
								<view class="df jsb">
									<view class="w470">
										<view
											v-if="
												item.recongtionContent &&
												item.recongtionContent.length
											"
											class="word-break f28 g6b"
										>
											<block
												v-for="(
													node, nodeIdx
												) in item.recongtionContent"
												:key="nodeIdx"
											>
												<block
													v-if="
														node.node === 'element'
													"
												>
													<block
														v-if="
															node.tag === 'span'
														"
													>
														<block
															v-for="(
																node, no
															) in node.nodes"
															:key="no"
														>
															<text
																v-if="
																	node.node ===
																	'text'
																"
																class="line-font"
																@tap="
																	clickInfo(
																		node.text
																	)
																"
																>{{
																	node.text
																}}</text
															>
														</block>
													</block>
													<block
														v-if="node.tag === 'br'"
														><text>\n</text></block
													>
												</block>
												<block
													v-if="node.node === 'text'"
													>{{ node.text }}</block
												>
											</block>
										</view>
										<view
											class="f28 word-break g6b"
											v-else
											>{{ item.content }}</view
										>
									</view>
									<view class="f28 primary-color df">
										<view
											@tap="
												goReportDetail(
													item.journalId,
													item.detailViewFlag
												)
											"
											>查看详情</view
										>
										<uni-icons
											type="forward"
											size="20"
											color="#3A74FC "
										></uni-icons>
									</view>
								</view>
								<view v-if="item.urls && item.urls.length"
									><show-media :value="item.urls"></show-media
								></view>
								<view
									class="mt30 pl15"
									v-if="item.voice && item.voice.length"
								>
									<view
										v-for="(audio, auIndex) in item.voice"
										:key="auIndex"
										class="mb20"
									>
										<diy-audio
											:audio-time="audio.duration"
											:file="audio.url"
											:voice-text="audio.text"
											:width="200"
										></diy-audio>
									</view>
								</view>
								<view class="f24 g6b flex-reverse"
									>{{ item.userName }}
									{{ item.commitTime }}</view
								>
							</view>
							<view class="mt10 top-line pt20">
								<view
									class="df jsb ac f20 pb20"
									:class="
										detailType === 'approval' &&
										item.replies &&
										item.replies.length
											? 'reply-line'
											: ''
									"
								>
									<view
										class="df ac f22"
										:class="{
											'active-color':
												item.solveStatus == 2,
										}"
										@tap="solveQues(item, index, 2)"
									>
										<imageIcon
											:value="
												item.solveStatus === 2
													? solveyes2
													: solveyes1
											"
											width="34rpx"
											height="34rpx"
										></imageIcon>
										<view class="ml10">已解决</view>
									</view>
									<view
										class="ml20 df ac f22"
										:class="{
											'active-color':
												item.solveStatus == 3,
										}"
										@tap="solveQues(item, index, 3)"
									>
										<imageIcon
											:value="
												item.solveStatus === 3
													? solveno2
													: solveno1
											"
											width="34rpx"
											height="34rpx"
										></imageIcon>
										<view class="ml10">未解决</view>
									</view>
									<view class="flex-center ml20 mr20">
										<button
											open-type="share"
											class="backf pl10 pr10 flex-center f22"
											:data-share-id="item.id"
										>
											<imageIcon
												:value="share1"
												width="28rpx"
												height="30rpx"
											></imageIcon>
											<view class="ml10">转发</view>
										</button>
									</view>
									<view
										@tap="clickLikeNum(item, index)"
										class="df ac f22"
									>
										<imageIcon
											:value="
												item.likeStatus
													? zanCheck
													: zanNoCheck
											"
											width="22rpx"
											height="20rpx"
										></imageIcon>
										<view class="ml10">
											{{
												item.likeStatus &&
												item.likeNum > 0 &&
												item.likeNum < 100
													? '已点赞+' + item.likeNum
													: !item.likeStatus &&
													  item.likeNum > 0 &&
													  item.likeNum < 100
													? '点赞+' + item.likeNum
													: item.likeStatus &&
													  item.likeNum > 99
													? '已点赞99+'
													: !item.likeStatus &&
													  item.likeNum > 99
													? '点赞99+'
													: '点赞'
											}}
										</view>
									</view>
									<view
										class="ml20 df ac f22"
										:class="{
											'active-color': item.showApproval,
										}"
										@tap="clickReply(index)"
										v-if="showApproval"
									>
										<imageIcon
											:value="
												item.showApproval
													? chatCheck
													: chatNoCheck
											"
											width="22rpx"
											height="20rpx"
											style="padding-top: 2rpx"
										></imageIcon>
										<view class="ml10">{{
											item.replies && item.replies.length
												? '已回复'
												: '回复'
										}}</view>
									</view>
								</view>
								<view
									class="mt20 f32"
									v-if="
										(detailType === 'detail' &&
											item.showReply &&
											item.replies &&
											item.replies.length) ||
										detailType === 'approval'
									"
								>
									<view
										class="f28"
										v-if="
											item.replies && item.replies.length
										"
										>全部回复</view
									>
									<view
										v-for="reply in item.replies"
										:key="reply.id"
										class="df mt20 reply-line"
									>
										<view class="reply-avatar"
											><image
												:src="avatarImg"
												class="avatar-img"
											></image
										></view>
										<view class="ml10 f24 w80">
											<view
												v-if="reply.userName"
												class="pl20"
												>{{ reply.userName }}</view
											>
											<view
												v-if="reply.content"
												class="pl20"
												>{{ reply.content }}</view
											>
											<view
												v-if="reply.voiceUrl"
												class="ml20"
											>
												<diy-audio
													:file="reply.voiceUrl"
													:audio-time="
														reply.voiceDuration
													"
													:voice-text="
														reply.voiceText
													"
													:width="200"
												></diy-audio>
											</view>
											<view
												class="rp-time f24 pl20 pb20"
												v-if="reply.gmtCreate"
												>{{
													reply.gmtCreate
														.slice(5, 19)
														.replace(/-/g, '/')
												}}</view
											>
										</view>
									</view>
									<view
										v-if="
											showApproval &&
											detailInfo.readStatus !== 3 &&
											item.replies &&
											item.replies.length
										"
										class="mt20 pb20"
									>
										<button
											class="reply-button w40"
											@tap="clickReply(index)"
										>
											添加回复>
										</button>
									</view>
								</view>
								<view
									class="mt20 pb20"
									v-if="item.showApproval && showApproval"
								>
									<reply-input
										@input="replyInput"
										@record="replyRecord"
										:local-data="item"
									></reply-input>
									<view class="mt20"
										><button
											class="reply-button w40"
											@tap="submitReply(item)"
										>
											提交回复
										</button></view
									>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="showEmpty"><diy-empty></diy-empty></view>
			</view>
		</view>
	</view>
</template>

<script>
import diyAudio from '@/subPackagesLog/components/diy-audio/diy-audio.vue'
import replyInput from '@/subPackagesLog/components/reply-input/reply-input.vue'
import imageIcon from '@/subPackagesLog/pages/workLog/components/imageIcon.vue'
import HtmlToJson from '@/common/libs/html2json.js'
import avatarImg from '@/static/img/avatar.png'
import zanNoCheck from '@/static/img/zan-1.png'
import zanCheck from '@/static/img/zan-2.png'
import chatNoCheck from '@/static/img/chat-1.png'
import chatCheck from '@/static/img/chat-2.png'
import iconKeJain from './icon/kejian-icon.png'
import solveyes1 from '@/static/img/solveyes-1.png'
import solveyes2 from '@/static/img/solveyes-2.png'
import solveno1 from '@/static/img/solveno-1.png'
import solveno2 from '@/static/img/solveno-2.png'
import share1 from '@/static/img/share-1.png'
export default {
	components: {
		diyAudio,
		replyInput,
		imageIcon,
	},
	data() {
		return {
			solveyes1,
			solveyes2,
			solveno1,
			solveno2,
			share1,
			iconKeJain,
			avatarImg,
			zanNoCheck,
			zanCheck,
			chatNoCheck,
			chatCheck,
			detailType: 'approval',
			detailInfo: {
				details: [],
			},
			isDisabled: false,
			noClick: true,
			userId: '',
			replyData: {
				journalDetailId: '',
				content: '',
				voiceUrl: '',
				voiceDuration: 0,
				voiceText: '',
			},
			startHandler: {
				type: Function,
				default() {
					return (node) => {
						node.attr.class = null
						node.attr.style = null
					}
				},
			},
			endHandler: {
				type: Function,
				default: null,
			},
			imageProp: {
				type: Object,
				default() {
					return {
						mode: 'aspectFit',
						padding: 0,
						lazyLoad: false,
						domain: '',
					}
				},
			},
			typeArry: [
				{
					name: '需要解决的问题',
					num: 10,
				},
				{
					name: '需要解决的问题',
					num: 10,
				},
				{
					name: '需要解决的问题',
					num: 10,
				},
			],
			downSHow: true,
			dataList: [],
			hasMore: false,
			paramData: {
				pageIndex: 1,
				pageSize: 5000,
				type: 0,
				templateId: '',
				templateDetailId: '',
				labelId: '',
				endTime: '',
				orgId: uni.getStorageSync('orgId'),
				journalDetailId: '',
			},
			workJournalCountQuestionVOList: [],
			workJournalCountLabelVOList: [],
			justNum: 0,
			justNumLow: 0,
			courseTypeArr: [],
			contentScrollW: 0,
			currentIndex: 0,
			scrollLeft: 0,
			showEmpty: false,
		}
	},
	onLoad(options) {
		console.log(options)
		let _that = this
		this.paramData.type = options.type
		this.paramData.templateId = options.templateId
		this.paramData.templateDetailId = options.templateDetailId
		this.paramData.endTime = options.endTime
		this.paramData.labelId = options.labelId
		this.currentIndex = options.index || 0
		this.userId = uni.getStorageSync('userId')
		this.workJournalCountQuestionVOList = uni.getStorageSync(
			'workJournalCountQuestionVOList'
		)
		this.workJournalCountLabelVOList = uni.getStorageSync(
			'workJournalCountLabelVOList'
		)
		this.justNum = 4 - (this.workJournalCountLabelVOList.length % 5)
		this.justNumLow = 5 - (this.workJournalCountLabelVOList.length % 5)
		this.paramData.journalDetailId = options.journalDetailId
			? Number(options.journalDetailId)
			: ''
		if (!options.journalDetailId) {
			_that.$nextTick(() => {
				setTimeout(() => {
					_that.getScrollW()
				}, 200)
			})
		}
		this.paramData.type = Number(options.type) || 0
		if (this.paramData.journalDetailId) {
			uni.setNavigationBarTitle({
				title: '给你分享了一条内容',
			})
		} else {
			uni.setNavigationBarTitle({
				title:
					this.paramData.type === 0
						? '每日小结'
						: this.paramData.type === 1
						? '每周小结'
						: '每月小结',
			})
		}
	},
	onShow() {
		if (uni.getStorageSync('token')) {
			this.initData()
		} else {
			uni.navigateTo({
				url: '/subPackagesIndex/pages/index/authorization/index',
			})
		}
	},
	computed: {
		//是否可回复
		showApproval() {
			return this.detailType === 'approval'
		},
	},
	//分享
	onShareAppMessage(res) {
		let journalDetailId = res.target.dataset.shareId
		let shareUrl = '/subPackagesLog/pages/workLog/newDailyDetail'
		return {
			title: '给你分享了一条内容',
			path: shareUrl + '?journalDetailId=' + journalDetailId,
		}
	},
	methods: {
		// changeDay(index) {
		// 	if (this.activeIndex === index) {
		// 		return
		// 	} else {
		// 		this.id = id
		// 		this.contentImage = url
		// 		this.activeIndex = index
		// 		this.scrollLeft = this.courseTypeArr[index].left - this.contentScrollW / 2 + this.courseTypeArr[index].width / 2
		// 	}
		// },
		// scrollMove(e) {
		// 	this.scrollLeft = e.detail.scrollLeft
		// },
		currentTypeClick(val, index) {
			if (val) {
				this.paramData.templateDetailId = val.templateDetailId
				this.getReportDetail()
			}
			this.scrollLeft =
				this.courseTypeArr[index].left -
				this.contentScrollW / 2 +
				this.courseTypeArr[index].width / 2
		},
		getScrollW() {
			let _that = this
			const query = uni.createSelectorQuery().in(this)
			query
				.select('.scroll-top')
				.boundingClientRect((data) => {
					// 拿到 scroll-view 组件宽度
					_that.contentScrollW = data.width
				})
				.exec()
			query
				.selectAll('.scroll-type')
				.boundingClientRect((data) => {
					let dataLen = data.length
					_that.courseTypeArr = data
					_that.currentTypeClick('', this.currentIndex)
				})
				.exec()
		},
		goReportDetail(journalId, detailViewFlag) {
			if (detailViewFlag) {
				const type = 'approval'
				uni.navigateTo({
					url: `/subPackagesLog/pages/workLog/reportDetail?id=${journalId}&type=${type}`,
				})
			} else {
				uni.showToast({
					title: '您无该内容详情的查看权限',
					icon: 'error',
				})
			}
		},
		changeLabel(val) {
			this.paramData.labelId = val.labelId
			this.getReportDetail()
		},
		//已解决未解决
		solveQues(item, index, type) {
			this.$request
				.request(
					'carer-platform/journal/workJournalDetail/updateSolveStatus',
					{
						method: 'post',
						data: {
							journalDetailId: item.id,
							solveStatus: type,
						},
					}
				)
				.then((res) => {
					if (res.success) {
						this.detailInfo.details[index].solveStatus = type
					}
				})
		},
		//数据初始化
		initData() {
			this.getReportDetail()
		},
		//查询汇报详情
		getReportDetail() {
			let _that = this
			this.$request
				.request(
					'carer-platform/journal/workJournal/getWorkJournalDetailVOPage',
					{
						method: 'post',
						data: this.paramData,
					}
				)
				.then((res) => {
					if (res.success) {
						_that.detailInfo.details = res.data.data
						let dailyDateStr = ''
						// if (res.data && res.data.id) {
						if (
							_that.detailInfo.details &&
							_that.detailInfo.details.length
						) {
							_that.detailInfo.details.forEach((item) => {
								// _that.$set(item, 'solveStatus', item.solveStatus)
								_that.$set(item, 'showReply', false)
								_that.$set(item, 'showApproval', false)
								_that.$set(
									item,
									'likeNumColor',
									item.likeStatus ? '#3a9bff' : ''
								)
								_that.$set(item, 'voice', item.voices)
								// if (item.content) {
								// 	_that.recognitionContent(item.content, arr => {
								// 		if (arr && arr.length) {
								// 			_that.$set(item, 'recongtionContent', arr)
								// 		}
								// 	})
								// }
								_that.showEmpty = false
							})
						} else {
							_that.showEmpty = true
						}
					}
					// }
				})
		},
		//点击回复
		clickReply(index) {
			if (this.detailInfo.readStatus !== 3) {
				this.detailInfo.details[index].showApproval =
					!this.detailInfo.details[index].showApproval
				if (this.detailInfo.details[index].showApproval) {
					this.replyData = {
						journalDetailId: '',
						content: '',
						voiceUrl: '',
						voiceDuration: 0,
						voiceText: '',
					}
					this.detailInfo.details.forEach((item, i) => {
						if (i !== index) {
							item.showApproval = false
						}
					})
				}
			}
		},
		//点赞
		clickLikeNum(item, index) {
			let _that = this
			if (this.detailInfo.readStatus !== 3) {
				this.$request
					.request(
						'carer-platform/journal/workJournalDetail/updateLikeStatus',
						{
							method: 'post',
							data: {
								journalDetailId: item.id,
								likeStatus: !item.likeStatus,
							},
						}
					)
					.then((res) => {
						if (res.success) {
							_that.detailInfo.details[index].likeStatus =
								!item.likeStatus
							let likeNum =
								_that.detailInfo.details[index].likeNum
							_that.detailInfo.details[index].likeNum = _that
								.detailInfo.details[index].likeStatus
								? likeNum + 1
								: likeNum - 1
						}
					})
			}
		},
		//回复输入
		replyInput(data) {
			this.replyData.content = data
		},
		//语音输入
		replyRecord(data) {
			if (data && data.filePath) {
				this.replyData.voiceUrl = data.filePath
				this.replyData.voiceDuration = data.time
				this.replyData.voiceText = data.voiceText
			} else {
				this.replyData.voiceUrl = ''
				this.replyData.voiceDuration = 0
				this.replyData.voiceText = ''
			}
		},
		//提交回复
		submitReply(item) {
			let _that = this
			this.replyData.journalDetailId = item.id
			if (!this.replyData.content && !this.replyData.voiceUrl) {
				uni.showToast({
					title: '回复文字或语音必填一项',
					icon: 'none',
				})
				return false
			}
			this.$request
				.request('carer-platform/journal/workJournalDetail/reply', {
					method: 'post',
					data: this.replyData,
				})
				.then((res) => {
					if (res.success) {
						uni.showToast({
							title: '操作成功',
							icon: 'success',
						})
						_that.getReportDetail()
					}
				})
		},
		//匹配识别文字
		async recognitionContent(inputText, func) {
			let _that = this
			await this.$request
				.request('carer-platform/content/handle/content', {
					method: 'post',
					data: {
						content: inputText,
					},
				})
				.then((res) => {
					if (res.success && res.data) {
						let newInputText = res.data.split('\n').join('<br/>')
						const results = HtmlToJson(
							newInputText,
							_that.startHandler,
							_that.endHandler,
							this
						)
						func && func(results.nodes)
					}
				})
		},
		//点击标蓝文字
		clickInfo(text) {
			let date = new Date().getTime()
			uni.navigateTo({
				url:
					'/subPackagesLog/pages/workLog/schedule/create?date=' +
					date +
					'&type=1&text=' +
					text,
			})
		},
	},
	onUnload() {
		uni.removeStorageSync('workJournalCountQuestionVOList')
		uni.removeStorageSync('workJournalCountLabelVOList')
	},
}
</script>

<style scoped lang="scss">
.pb-none {
	padding-bottom: 0 !important;
}
.container {
	min-height: calc(100vh - 160rpx);
	font-size: 32rpx;
	padding-bottom: 160rpx;
	padding-left: 0 !important;
	padding-right: 0 !important;
	.box-bd {
		border: 2rpx #dddddd solid;
		border-radius: 10rpx;
		padding: 0;
	}
	.nav-tag {
		flex: 1;
		margin-left: 10rpx;
		margin-right: 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 32rpx;
	}
	.reply-avatar {
		margin-top: 10rpx;
		width: 82rpx;
		height: 82rpx;
		border-radius: 41rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		background-color: #ffffff;
	}
	.avatar-img {
		width: 82rpx;
		height: 82rpx;
		border-radius: 41rpx;
	}
	.tag-view {
		border: 2rpx $tag-color solid;
		border-radius: 10rpx;
		text-align: center;
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 10rpx;
		color: $tag-color;
		font-size: 28rpx;
	}
	.tag-view-active {
		border: 2rpx $active-color solid;
		color: $active-color;
		background-color: #f1f8ff;
	}
	.line-font {
		color: $primary-color;
		text-decoration: underline;
	}
	.icon-detail {
		width: 30rpx;
		height: 32rpx;
	}
	.tag-add {
		width: 174rpx;
		height: 54rpx;
		line-height: 54rpx;
		border: 2rpx $tag-color solid;
		border-radius: 10rpx;
		text-align: center;
		padding: 2rpx;
		color: $tag-color;
		font-size: 28rpx;
	}
	.qus-title {
		width: calc(100vw - 174rpx);
	}
	.reply-back {
		background-color: #eeeeee;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}
	.detail-box {
		background-color: #eeeeee;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	.reply-line {
		border-bottom: 2rpx #f4f4f4 solid;
	}
	.top-line {
		border-top: 2rpx #eaeaea solid;
	}
	.rp-time {
		color: #a9a9a9;
	}
	.reply-button {
		height: 56rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #2e95ff 0%, $blue-color 100%);
		font-size: 26rpx;
		color: #ffffff;
		border-radius: 40rpx;
	}
	.reply-button::after {
		border: none;
	}
	.zan-img {
		width: 34rpx;
		height: 32rpx;
	}
}
.back-c6 {
	background: $blue-color;
}
.border-4 {
	border-radius: 4rpx;
}
.w470 {
	width: 470rpx;
}
.m30 {
	margin: 30rpx;
}
.tab-normal {
	text-align: center;
	// width: 230rpx;
	min-width: 230rpx;
	color: $active-color;
	border-right: 1px solid #f4f4f4;
	display: inline-block;
	font-size: 28rpx;
	padding: 0 10rpx;
}
.tab-active {
	text-align: center;
	// width: 230rpx;
	min-width: 230rpx;
	color: #ffffff;
	border-right: 1px solid #f4f4f4;
	background: $active-color;
	border-radius: 10rpx;
	display: inline-block;
	font-size: 28rpx;
	padding: 0 10rpx;
}
.scroll-top {
	// width: 100%;
	height: 96rpx;
	white-space: nowrap;
}
// .scroll-top .scroll-type:nth-child(1) {
// 	margin-left: 30rpx;
// }
.tab-normal:last-child {
	border-right: none;
}
.box-label,
.active-label {
	height: 50rpx;
	line-height: 50rpx;
	width: 130rpx;
	margin-bottom: 15rpx;
	text-align: center;
	background: #eaf5ff;
	border: 1rpx solid #3a9bff;
	border-radius: 10rpx;
}
.active-label {
	background: #528ef9;
	color: #ffffff;
}
.h-125 {
	height: 125rpx;
	overflow: hidden;
}
.symbol {
	width: 134rpx;
}
.pb0 {
	padding-bottom: 0;
}
</style>
